<template>
  <div class="chengzhangjingli">
    <daiban id="daiban" name="带班情况"></daiban>
    <el-form ref="classform" :model="classform" label-width="80px">
      <el-form-item label="学年" prop="xn">
        <el-input
          v-model="classform.xn"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="学期" prop="xq">
        <el-select
          clearable
          v-model="classform.xq"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in xq"
            :key="item.dictLabel"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="time">
        <div class="block">
          <el-date-picker
            v-model="classform.jssj"
            align="right"
            unlink-panels
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            clearable
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="班级" prop="bjmc">
        <el-input
          v-model="classform.bjmc"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item class="peoplenum" label="人数" prop="rs">
        <el-input
          v-model="classform.rs"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item class="lastitem">
        <el-button @click="resetForm('classform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('classform')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <daiban id="daiban" class="yanxiu" name="研修情况"></daiban>
    <!-- 学历提升 -->
    <daiban class="erjititle" name="学历提升"></daiban>
    <el-form class="form2" ref="xltsform" :model="xltsform" label-width="80px">
      <div class="bigbox" id="bigbox1">
        <div class="daifuzhi" id="daifuzhi1">
          <el-form-item label="学历类型" prop="xllx">
            <el-select
              clearable
              v-model="xltsform.xllx"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in educationtype"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="毕业院校" prop="graduatedschool">
            <el-input
              v-model="xltsform.byyx"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="所学专业" prop="sxzy">
            <el-input
              v-model="xltsform.sxzy"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="学习时间" prop="jssj">
            <div class="block">
              <el-date-picker
                v-model="xltsform.jssj"
                align="right"
                type="monthrange"
                placeholder="选择日期"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <div class="dele"></div>
        </div>
      </div>
      <el-button @click="copeitem('xueli')" class="addxueli"
        ><i>＋</i>添加</el-button
      >

      <el-form-item class="lastitem">
        <el-button @click="resetForm('xltsform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('xltsform')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 研修培训 -->
    <daiban class="erjititle" name="研修培训"></daiban>
    <el-form class="form2" ref="yxpxform" :model="yxpxform" label-width="80px">
      <div class="bigbox" id="bigbox2">
        <div class="daifuzhi" id="daifuzhi2">
          <el-form-item label="培训项目" prop="pxxm">
            <el-input
              v-model="yxpxform.pxxm"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="组织单位" prop="zzdw">
            <el-input
              v-model="yxpxform.zzdw"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="培训时间" prop="jssj">
            <div class="block">
              <el-date-picker
                v-model="yxpxform.jssj"
                align="right"
                type="monthrange"
                placeholder="选择日期"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="培训类别" prop="pxlb">
            <el-select
              clearable
              v-model="yxpxform.pxlb"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培训级别" prop="pxjb">
            <el-select
              clearable
              v-model="yxpxform.pxjb"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in level"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学时认证" prop="xsrz">
            <el-input
              v-model="yxpxform.xsrz"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <el-button @click="copeitem('yanxiu')" class="addyanxiu"
        ><i>＋</i>添加</el-button
      >

      <el-form-item class="lastitem">
        <el-button @click="resetForm('yxpxform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('yxpxform')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import $ from "../../assets/jquery.min.js";
import ajax from "../../api/ajax.js";
import daiban from "../../components/title/subTitle.vue";
import qs from "qs";
export default {
  components: {
    daiban,
  },
  props: { cldgh: { type: String } },

  data() {
    return {
      //带班情况数据
      classform: {
        gh: "",
        xn: "",
        xq: "",
        jssj: "",
        kssj: "",
        bjmc: "",
        rs: "",
      },
      //学历提升数据
      xltsform: {
        gh: "",
        byyx: "",
        jssj: "",
        kssj: "",
        sxzy: "",
        xllx: "",
      },
      //研修培训
      yxpxform: {
        gh: "",
        jssj: "",
        kssj: "",
        pxlb: "",
        pxxm: "",
        xsrz: "",
        zzdw: "",
      },
      //培训类型
      type: [
        {
          value: "岗前培训",
          label: "岗前培训",
        },
        {
          value: "在职培训",
          label: "在职培训",
        },
        {
          value: "骨干培训",
          label: "骨干培训",
        },
      ],
      //培训级别
      level: [
        {
          value: "院级",
          label: "院级",
        },
        {
          value: "校级",
          label: "校级",
        },
        {
          value: "省级",
          label: "省级",
        },
        {
          value: "国家级",
          label: "国家级",
        },
      ],
      //日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //学期
      xq: [],
      //学历类型
      educationtype: [
        {
          value: "选项1",
          label: "全日制",
        },
        {
          value: "选项2",
          label: "非全日志",
        },
      ],
    };
  },

  created() {
    this.getlist();
  },
  mounted() {},
  methods: {
    //获取下拉菜单
    async getlist() {
      const result = await ajax("system/dict/data/list", "", "get");
      for (var i in result.rows) {
        if (result.rows[i].dictType == "sys_js_xq") {
          this.xq.push(result.rows[i]);
        }
      }
    },
    //克隆学历提升项
    copeitem(type) {
      if (type == "xueli") {
        console.log(444);
        const $orig = $("#daifuzhi1:first").clone(true);
        $("#bigbox1").append($orig);
      }
      if (type == "yanxiu") {
        const $orig = $("#daifuzhi2:first").clone(true);
        $("#bigbox2").append($orig);
      }
    },
    //重置
    resetForm(form) {
      this.$refs[form].resetFields();
    },

    //提交
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        // this.classform.kssj = this.classform.jssj[0];
        // this.classform.jssj = this.classform.jssj[1];
        // this.classform.gh = this.cldgh;
        console.log(this.classform);
        if (valid) {
          if (formName == "classform") {
            const result = await ajax(
              "dbqk",
              qs.stringify(this.classform),
              "post"
            );
            console.log(result);
          }
          if (formName == "xltsform") {
            this.xltsform.gh = this.cldgh;
            console.log(this.xltsform.kssj);
            this.xltsform.kssj = this.xltsform.jssj[0];
            this.xltsform.jssj = this.xltsform.jssj[1];
            if (this.xltsform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/xlts",
                qs.stringify(this.xltsform),
                "post"
              );
              console.log(this.xltsform, "------", result);
              alert("这是学历提升");
            }
          }
          if (formName == "yxpxform") {
            this.yxpxform.gh = this.cldgh;
            console.log(this.yxpxform.kssj);
            this.yxpxform.kssj = this.yxpxform.jssj[0];
            this.yxpxform.jssj = this.yxpxform.jssj[1];
            if (this.yxpxform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/yxpx",
                qs.stringify(this.yxpxform),
                "post"
              );
              console.log(this.yxpxform, "------", result);
              alert("这是研修培训");
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.chengzhangjingli {
  width: 100%;
  height: 768px;
  overflow: auto;
  .el-form {
    background-position: bottom;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.192) 0%,
      rgba(0, 0, 0, 0.192) 50%,
      transparent 50%
    );
    background-size: 20px 1px;
    background-repeat: repeat-x;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 33px;
    margin-right: 7px;
    .el-form-item {
      margin-left: 4px;
      width: 402px;
    }
    .lastitem {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-left: 0;
    }
    .addxueli,
    .addyanxiu {
      margin-bottom: 20px;
      border: 1px dashed #ccc;
      width: 99%;
      height: 40px;
      background: #fafafa;
    }
    .addxueli:hover,
    .addyanxiu:hover {
      border: 1px dashed #409eff;
    }
  }
}

.daifuzhi {
  position: relative;
  width: 100%;
  height: 130px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 4px;
  div {
    margin-bottom: 0;
  }
}

.daifuzhi:hover {
  background: #064cb425;
}
.dele {
  cursor: pointer;
  //   display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -10px;
  right: -7px;
  background-image: url("../../assets/img/删除@2x.png");
  background-size: 100%;
}
</style>